import React, { useEffect, useState } from "react";
import instance from "../../../../api/request";
import { Tabs, Swiper } from "antd-mobile";
import './Index.css'
import { useNavigate } from "react-router-dom";
type Props = { deptId: number }
function Index({ deptId }: Props) {
  const [list, setList] = useState([]);
  
  const [condition, setCondition] = useState(1); // 1综合 2好评 3咨询数 4价格
  const [sortBy, setSortBy] = useState<number | undefined>(undefined); // 价格时传1
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(5);
  const nav=useNavigate()

  useEffect(() => {
    instance
      .get("/api/user/inquiry/v1/findDoctorList", {
        params: {
          deptId,
          condition,
          ...(condition === 4 && sortBy ? { sortBy } : {}),
          page: page,
          count: count,
        },
      })
      .then((res) => {
        console.log(res, "====列表");
        setList(res?.data?.result || []);
      });
  }, [deptId, condition, sortBy, page, count]);

  const [active, setActive] = useState(0); // 0:综合 1:好评 2:咨询数 3:价格
  const [priceUp, setPriceUp] = useState(true);
  const [currentIndex, setCurrentIndex] = useState(0); // 当前主卡索引

  const items = [
    { label: '综合' },
    { label: '好评' },
    { label: '咨询数' },
    { label: '价格', price: true },
  ];

  return (
    <div>
      {/* 顶部四个筛选项 */}
      <div className="wen-bar">
        {items.map((it, idx) => (
          <div
            key={idx}
            className={`wen-item ${active === idx ? 'wen-active' : ''} ${it.price ? 'wen-price' : ''}`}
            onClick={() => {
              setActive(idx)
              if (idx === 3) { setCondition(4); setSortBy(1); setPriceUp(v=>!v) }
              else { setCondition(idx+1); setSortBy(undefined) }
            }}
          >
            <span>{it.label}</span>
            {it.price && (
              <span className="wen-caret-box">
                <span className={`wen-caret ${priceUp ? 'active' : ''}`}>▲</span>
                <span className={`wen-caret down ${!priceUp ? 'active' : ''}`}>▼</span>
              </span>
            )}
          </div>
        ))}
      </div>
      {/* 医生主卡 + 底部轮播（点击小图切换主卡） */}
      {list.length > 0 && (
        <div className="wen-list">
          {(() => {
            const item:any = list[currentIndex] || {} as any;
            return (
              <div className="wen-card" key={item.doctorId || currentIndex}>
                <img className="wen-card-img" src={item.imagePic} alt={item.doctorName} onClick={(key)=>nav(`/wendetail/${item.doctorId}`)} />
                <div className="wen-card-body">
                  <div className="wen-row">
                    <span className="wen-name">{item.doctorName}</span>
                    <span className="wen-title">{item.jobTitle}</span>
                  </div>
    
                  <div className="wen-hospital">{item.inauguralHospital}</div>
                  <div className="wen-stats">
                    <span className="wen-stat">好评率 <b>{item.praise}%</b></span>
                    <span className="wen-stat">服务患者数 <b>{item.serverNum}</b></span>
                    <span className="wen-more">···</span>
                  </div>
                </div>
                <div className="wen-pricebar">
                  <span className="wen-price" onClick={()=>nav('/jiao')}>{item.servicePrice}H币/次</span>
                  <button className="wen-btn" onClick={()=>nav('/chat')}>立即咨询</button>
                </div>
                <div className="wen-mini-swiper">
                  <Swiper loop indicator={() => null}>
                    {Array.from({ length: Math.ceil(list.length / 3) }).map((_, slideIdx) => {
                      const slice = list.slice(slideIdx * 3, slideIdx * 3 + 3);
                      return (
                        <Swiper.Item key={slideIdx}>
                          <div className="wen-mini">
                            {slice.map((p:any, idx:number) => {
                              const absoluteIdx = slideIdx * 3 + idx;
                              return (
                                <div className={`wen-mini-item ${absoluteIdx===currentIndex ? 'active' : ''}`} key={p.doctorId || absoluteIdx} onClick={() => setCurrentIndex(absoluteIdx)}>
                                  <img src={p.imagePic} alt="头像" />
                                  <div className="wen-mini-name">{p.doctorName}</div>
                                </div>
                              );
                            })}
                          </div>
                        </Swiper.Item>
                      );
                    })}
                  </Swiper>
                  <div className="wen-mini-more">{currentIndex+1}/{list.length}</div>
                </div>
              </div>
            );
          })()}
        </div>
      )}
    </div>
  );
}

export default Index;
